<template>
	<div class="list">
		<div class="header">
			<image class="js-img" :src="listDetail.coverImgUrl" mode="aspectFill"></image>
			<div class="bg"></div>
			<div class="main" v-if="listDetail.creator">
				<div class="main-top">
					<div class="left"><image :src="pictureSize(listDetail.coverImgUrl, 200, 200)" mode="aspectFill"></image></div>
					<div class="right">
						<div class="name u-line-2">{{ listDetail.name }}</div>
						<div class="avatr">
							<image :src="pictureSize(listDetail.creator.avatarUrl)" mode="aspectFill"></image>
							<text>{{ listDetail.creator.nickname }}</text>
						</div>
						<div class="info u-line-1">简介：{{ listDetail.description }}</div>
					</div>
				</div>
				<div class="main-bottom">
					<div class="le">
						<u-icon v-if="hasCollect" @click="handleCollect" name="heart" size="24" color="#fff"></u-icon>
						<u-icon v-else @click="handleCollect" name="heart-fill" size="24" color="red"></u-icon>
						<div class="text">{{ formatCount(listDetail.playCount) }}</div>
					</div>
					<div class="le" @click="handleShare">
						<u-icon name="share-square" size="24" color="#fff"></u-icon>
						<div class="text">分享</div>
					</div>
				</div>
			</div>
		</div>

		<div class="js-list" v-if="listDetail.tracks">
			<div v-for="(item, index) in listDetail.tracks.slice(0, 20)" :key="index">
				<div class="js-item" @click="$u.route(`/pages/music/index?id=${item.id}`)">
					<div class="num">{{ index + 1 }}</div>
					<div class="intro">
						<div class="name u-line-1">{{ item.name }}</div>
						<div class="singer u-line-1">{{ item.ar[0].name }}</div>
					</div>
				</div>
				<u-line></u-line>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { formatCount } from '@/utils/formatCount.js';
import { pictureSize } from '@/utils/pictureSize.js';
export default {
	data() {
		return {
			hasCollect: true
		};
	},
	onLoad(options) {
		this.$store.dispatch('home/fetchListDetail', options.id);
	},
	computed: {
		...mapGetters(['listDetail'])
	},
	methods: {
		formatCount,
		pictureSize,
		handleCollect() {
			this.hasCollect = !this.hasCollect;
		},
		handleShare() {
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 1,
				summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	position: relative;
	.js-img {
		width: 100%;
		height: 450rpx;
		z-index: -1;
	}
}
.bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 450rpx;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(5px);
}
.main {
	position: absolute;
	top: 0;
	left: 0;
	padding: 50rpx;
	padding-top: 70rpx;
	width: 650rpx;
	.main-top {
		display: flex;
		align-items: center;
		.left {
			image {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
			}
		}
		.right {
			color: #fff;
			padding-left: 30rpx;
			.name {
				font-size: 30rpx;
			}
			.avatr {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				text {
					font-size: 24rpx;
					padding-left: 10rpx;
				}
			}
			.info {
				font-size: 28rpx;
			}
		}
	}

	.main-bottom {
		display: flex;
		justify-content: space-between;
		padding-top: 50rpx;
		color: #fff;
		.le {
			display: flex;
			.text {
				padding-left: 10rpx;
			}
		}
	}
}

// .list {
// 	margin-top: 88rpx;
// }
/* #ifdef H5 */
.list {
	margin-top: 0;
}
/* #endif */
.js-item {
	display: flex;
	padding: 20rpx 30rpx;
	align-items: center;
	.num {
		font-size: 32rpx;
	}
	.intro {
		padding-left: 20rpx;
		.singer {
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style>
